import React, { useState } from 'react';
import {
  Form,
  Input,
  Select,
  Checkbox,
  Button,
  Upload,
  message,
  Tooltip,
  Row,
  Col,
  Modal,
  Card,
  Radio,
} from 'antd';
import { UploadOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import './BugCommit.css';
import BugListTable from './BugListTable';
import BugIcon from '../../../components/Icon/BugIcon';
const { Option } = Select;
const { TextArea } = Input;

const BugCommit = () => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);
  const [bugListModalVisible, setBugListModalVisible] = useState(false);
  const onFinish = async values => {
    const formData = new FormData();
    const token = sessionStorage.getItem('token');
    formData.token = token;
    fileList.forEach(file => {
      formData.append('files', file.originFileObj);
    });

    Object.keys(values).forEach(key => {
      formData.append(key, values[key]);
    });

    try {
      const response = await fetch('http://localhost:29157/api/bugs/commit', {
        method: 'POST',
        headers: {
          token: sessionStorage.getItem('token'),
        },
        body: formData,
      });
      const data = await response.json();
      message.success('Bug提交成功');
      console.log(data);
    } catch (error) {
      message.error('提交失败');
      console.error(error);
    }
  };

  const handleChange = ({ fileList }) => {
    setFileList(fileList.slice(-2));
  };

  return (
    <Row justify='center'>
      <Col
        xs={24}
        sm={24}
        md={20}
        lg={16}
        xl={12}>
        <Card
          title={
            <span>
              提交Bug
              <Button
                type='link'
                onClick={() => setBugListModalVisible(true)}
                style={{ float: 'right' }}>
                当前Bug清单
              </Button>
            </span>
          }
          className='bug-commit-card'>
          <Form
            form={form}
            onFinish={onFinish}
            layout='vertical'
            autoComplete='off'
            className='bug-commit-form'>
            <Form.Item
              label='Bug简述'
              name='summary'
              rules={[{ required: true, message: '请输入Bug简述' }]}>
              <Input placeholder='一句话说明Bug' />
            </Form.Item>
            <Row gutter={16}>
              <Col
                xs={24}
                sm={12}>
                <Form.Item
                  label='Bug严重性'
                  name='severity'
                  rules={[{ required: true, message: '请选择Bug严重性' }]}>
                  <Select placeholder='请选择Bug严重性'>
                    <Option value='阻塞'>阻塞</Option>
                    <Option value='严重'>严重</Option>
                    <Option value='一般'>一般</Option>
                    <Option value='轻微'>轻微</Option>
                    <Option value='样式问题'>样式问题</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col
                xs={24}
                sm={12}>
                <Form.Item
                  label='Bug所在模块'
                  name='module'
                  rules={[{ required: true, message: '请选择Bug所在模块' }]}>
                  <Select placeholder='请选择Bug所在模块'>
                    <Option value='登录注册'>登录注册</Option>
                    <Option value='首页'>首页</Option>
                    <Option value='博客模块'>博客模块</Option>
                    <Option value='管理模块（阅读管理）'>
                      管理模块（阅读管理）
                    </Option>
                    <Option value='资源分享'>资源分享</Option>
                    <Option value='实用工具'>实用工具</Option>
                    <Option value='系统设置'>系统设置</Option>
                    <Option value='全局问题'>全局问题</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Form.Item
              label={
                <span>
                  Bug是否为衰退/Reopen{' '}
                  <Tooltip title='衰退是之前完好的功能再次出错，Reopen是Bug修复失败'>
                    <QuestionCircleOutlined />
                  </Tooltip>
                </span>
              }
              name='regression'
              initialValue='无'>
              <Radio.Group>
                <Radio value='无'>无</Radio>
                <Radio value='衰退'>衰退</Radio>
                <Radio value='Reopen'>Reopen</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              label='Bug详述'
              name='description'
              rules={[{ required: true, message: '请详细描述Bug' }]}>
              <TextArea
                placeholder='详细描述Bug'
                rows={4}
              />
            </Form.Item>
            <Form.Item label='Bug截图'>
              <Upload
                fileList={fileList}
                onChange={handleChange}
                beforeUpload={() => false} // 返回false以阻止自动上传
                listType='picture'
                maxCount={2}>
                <Button icon={<UploadOutlined />}>点击上传</Button>
              </Upload>
            </Form.Item>
            <Form.Item>
              <Button
                type='primary'
                htmlType='submit'
                className='submit-button'>
                提交Bug
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Col>
      <Modal
        title='当前Bug清单'
        visible={bugListModalVisible}
        onCancel={() => setBugListModalVisible(false)}
        footer={null}
        width={1000}>
        <BugListTable />
      </Modal>
    </Row>
  );
};

export default BugCommit;
